<template>
  <div id="trafficMarket">
    <section v-if="finishFlag && finishChart && finishList">
      <!-- box1 -->
      <div class="box1">
        <div class="box1Left">
          <span class="refreshTime">{{ mTime }}:{{ sTime }}后更新</span>
          <div class="livingBox">
            <span class="text01">正在直播</span>
            <p class="livingGif">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </p>
          </div>
          <p class="nowTime01">{{ timestamp(flow_rate.create_time, "Y-M-D h:m:s") }}</p>
          <div class="box1Num">
            <!--   <div class="chang">
              <p
                class="numData"
                v-countRunning="{ num: room_count, time: 120, step: 6 }"
                v-if="room_count != ''"
              ></p> 
              <span>场</span>
            </div>-->
            <div class="goodsnum">
              <p class="numData">
                带货直播场次
                <span
                  v-countRunning="{ num: pro_room_count, time: 120, step: 4 }"
                  v-if="pro_room_count != ''"
                ></span>
              </p>
            </div>
            <div class="rate01" style="padding-top:28px;">
              <p>环比上刻</p>
              <p>
                <img src="@/assets/wang/live/up.png" v-if="flow_rate.room_rate > 0" />
                <img src="@/assets/wang/live/down.png" v-if="flow_rate.room_rate < 0" />
                <img
                  src="@/assets/wang/live/ping.png"
                  class="pingRate"
                  v-if="flow_rate.room_rate == 0"
                />
                <span>{{ Math.abs(flow_rate.room_rate) }}%</span>
              </p>
            </div>
          </div>
          <!-- <div class="shopCar">
            <img src="@/assets/wang/live/shopcar.png" />
            <span
              v-countRunning="{ num: pro_room_count, time: 120, step: 4 }"
              v-if="pro_room_count != ''"
            ></span
            ><span>场带货直播</span>
          </div>-->
          <div class="viewNum">
            <span>实时观看人数</span>
            <el-tooltip
              class="item"
              effect="light"
              content="当前时间正在直播的直播间观看人数总和"
              placement="bottom"
              popper-class="mytooltip"
            >
              <img src="@/assets/shi/2.png" class="pointerWl" />
            </el-tooltip>
          </div>
          <div class="box1Num box1Num01">
            <p class="numData numData02">{{ format_num(flow_rate.vistor_count) }}</p>
            <div class="rate01">
              <p>环比上刻</p>
              <p>
                <img src="@/assets/wang/live/up.png" v-if="flow_rate.vistor_rate > 0" />
                <img src="@/assets/wang/live/down.png" v-if="flow_rate.vistor_rate < 0" />
                <img
                  src="@/assets/wang/live/ping.png"
                  class="pingRate"
                  v-if="flow_rate.vistor_rate == 0"
                />
                <span>{{ Math.abs(flow_rate.vistor_rate) }}%</span>
              </p>
            </div>
          </div>
        </div>
        <div class="box1Right">
          <LineChart
            :xData="xChart01"
            :y1Data="flow_chart.r"
            :y2Data="flow_chart.p"
            v-if="finishChart"
            name1="实时直播间数"
            name2="实时观看人数"
          />
          <div class="box1Right-img">
            <!-- <img src="@/assets/shi/workbenchbgc.png" alt="" /> -->
          </div>
        </div>
      </div>
      <!-- box2 -->
      <div class="box2">
        <div class="box2Left">
          <div class="titleBoxWhat">
            <div class="notice-box"></div>
            <span>实时直播在售商品数</span>
            <el-tooltip
              class="item"
              effect="light"
              content="统计当前时间正在开播的直播间在架商品数"
              placement="bottom"
              popper-class="mytooltip"
            >
              <img src="@/assets/meng/search_result04.png" alt class="pointerWl" />
            </el-tooltip>
          </div>
          <div class="rateBox">
            <span class="span01">
              {{
              format_num(flow_rate.pro_line_count)
              }}
            </span>
            <div class="rateSpan">
              <span class="span02">环比上刻</span>
              <img src="@/assets/wang/live/up01.png" v-if="flow_rate.pro_line_rate > 0" />
              <img src="@/assets/wang/goods/ddown.png" v-if="flow_rate.pro_line_rate < 0" />
              <img
                src="@/assets/wang/live/ping01.png"
                class="pingImg"
                v-if="flow_rate.pro_line_rate == 0"
              />
              <span
                :class="{
                  upColor: flow_rate.pro_line_rate > 0,
                  downColor: flow_rate.pro_line_rate < 0,
                  pingColor: flow_rate.pro_line_rate == 0
                }"
                class="span03"
              >{{ Math.abs(flow_rate.pro_line_rate) }}%</span>
            </div>
          </div>
        </div>
        <div class="box2Right">
          <div class="box2Item">
            <div class="titleBoxWhat">
              <!-- <img src="@/assets/wang/tdetails/dataimg.png"
              alt="" />-->
              <div class="notice-box"></div>
              <span>实时直播预估销量</span>
              <el-tooltip
                class="item"
                effect="light"
                content="统计当前时间正在开播的在架商品销量"
                placement="bottom"
                popper-class="mytooltip"
              >
                <img src="@/assets/meng/search_result04.png" alt class="pointerWl" />
              </el-tooltip>
            </div>
            <div class="rateBox">
              <span class="span01">{{ format_num(flow_rate.volum) }}</span>
              <div class="rateSpan">
                <span class="span02">环比上刻</span>
                <img src="@/assets/wang/live/up01.png" v-if="flow_rate.volum_rate > 0" />
                <img src="@/assets/wang/goods/ddown.png" v-if="flow_rate.volum_rate < 0" />
                <img
                  src="@/assets/wang/live/ping01.png"
                  class="pingImg"
                  v-if="flow_rate.volum_rate == 0"
                />
                <span
                  :class="{
                    upColor: flow_rate.volum_rate > 0,
                    downColor: flow_rate.volum_rate < 0,
                    pingColor: flow_rate.volum_rate == 0
                  }"
                  class="span03"
                >{{ Math.abs(flow_rate.volum_rate) }}%</span>
              </div>
            </div>
          </div>
          <div class="box2Item">
            <div class="titleBoxWhat">
              <!-- <img src="@/assets/meng/shop_details02.png"
              alt="" />-->
              <div class="notice-box"></div>
              <span>实时直播预估销售额</span>
              <el-tooltip
                class="item"
                effect="light"
                content="统计当前时间正在开播的在架商品销售额"
                placement="bottom"
                popper-class="mytooltip"
              >
                <img src="@/assets/meng/search_result04.png" alt class="pointerWl" />
              </el-tooltip>
            </div>
            <div class="rateBox">
              <span class="span01">{{ format_num(flow_rate.sales) }}</span>
              <div class="rateSpan">
                <span class="span02">环比上刻</span>
                <img src="@/assets/wang/live/up01.png" v-if="flow_rate.sales_rate > 0" />
                <img src="@/assets/wang/goods/ddown.png" v-if="flow_rate.sales_rate < 0" />
                <img
                  src="@/assets/wang/live/ping01.png"
                  class="pingImg"
                  v-if="flow_rate.sales_rate == 0"
                />
                <span
                  :class="{
                    upColor: flow_rate.sales_rate > 0,
                    downColor: flow_rate.sales_rate < 0,
                    pingColor: flow_rate.sales_rate == 0
                  }"
                  class="span03"
                >{{ Math.abs(flow_rate.sales_rate) }}%</span>
              </div>
            </div>
          </div>
          <div class="box2Item">
            <div class="titleBoxWhat">
              <!-- <img src="@/assets/wang/live/music.png"
                   alt=""
              class="musicIcon" />-->
              <div class="notice-box"></div>
              <span>实时直播点赞数</span>
              <el-tooltip
                class="item"
                effect="light"
                content="统计当前时间正在开播的直播间获赞总数"
                placement="bottom"
                popper-class="mytooltip"
              >
                <img src="@/assets/meng/search_result04.png" alt class="pointerWl" />
              </el-tooltip>
            </div>
            <div class="rateBox">
              <span class="span01">{{ format_num(flow_rate.favorite_count) }}</span>
              <div class="rateSpan">
                <span class="span02">环比上刻</span>
                <img src="@/assets/wang/live/up01.png" v-if="flow_rate.favorite_count_rate > 0" />
                <img src="@/assets/wang/goods/ddown.png" v-if="flow_rate.favorite_count_rate < 0" />
                <img
                  src="@/assets/wang/live/ping01.png"
                  class="pingImg"
                  v-if="flow_rate.favorite_count_rate == 0"
                />
                <span
                  :class="{
                    upColor: flow_rate.favorite_count_rate > 0,
                    downColor: flow_rate.favorite_count_rate < 0,
                    pingColor: flow_rate.favorite_count_rate == 0
                  }"
                  class="span03"
                >{{ Math.abs(flow_rate.favorite_count_rate) }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- box3 -->
      <div class="box3">
        <div class="box3Left">
          <div class="liveSaleRankTop">
            <div class="titleBoxWhat">
              <div class="notice-box"></div>
              <span>实时直播达人榜</span>
              <el-tooltip
                class="item"
                effect="light"
                content="统计当前时间正在开播的达人排名"
                placement="bottom"
                popper-class="mytooltip"
              >
                <img src="@/assets/meng/search_result04.png" alt class="pointerWl" />
              </el-tooltip>
            </div>
          </div>
          <table class="myTable mytable01 publicTable" v-if="finishList">
            <thead>
              <tr>
                <th>排名</th>
                <th>达人</th>
                <th>销售额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in rankList.live_flow_sale_rank" :key="'a' + index">
                <td class="brandSaleNum">{{ index + 1 }}</td>
                <td>
                  <div class="infoBox" @click="go_to_page01(item.authorid)">
                    <img :src="item.logo" @error="defaultImgFn(superman,$event)" />
                    <!-- <el-tooltip class="item"
                                effect="light"
                                :content="item.nickname"
                                placement="top"
                    popper-class="mytooltip">-->
                    <span>{{ item.nickname }}</span>
                    <!-- </el-tooltip> -->
                    <img
                      v-if="item.verifyType == 1"
                      src="../../../../assets/meng/search_result02.png"
                    />
                    <img
                      v-if="item.verifyType == 2"
                      src="../../../../assets/meng/search_result03.png"
                    />
                  </div>
                </td>
                <td class="brandSaleNum">{{ format_num(item.sales) }}</td>
              </tr>
            </tbody>
          </table>
          <div
            v-loading="!finishList"
            v-if="!finishList"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="box3Right">
          <div class="mapBox">
            <div class="titleBoxWhat">
              <!-- <img src="@/assets/wang/tdetails/map.png"
              alt="" />-->
              <div class="notice-box"></div>
              <span>实时直播达人地域分布图</span>
            </div>
            <div class="mymapBox">
              <ChinaMap :mapData="provinceRate" v-if="finishFlag" :showVisualMap="false" />
              <div
                v-loading="!finishFlag"
                v-if="!finishFlag"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
              <div v-if="finishFlag && provinceRate == null" class="noDataNoticewl">目前没有可以查看的数据哟~</div>
            </div>
          </div>
          <div class="chartBox">
            <section>
              <div class="titleBoxWhat">
                <!-- <img src="@/assets/wang/tdetails/Gender.png"
                alt="" />-->
                <div class="notice-box"></div>
                <span>实时直播达人性别分布</span>
              </div>
              <div class="genderBox">
                <GenderDistribution :pieData="genderData" v-if="finishFlag" />
                <div
                  v-loading="!finishFlag"
                  v-if="!finishFlag"
                  class="loading loading01"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div v-if="finishFlag && genderData == null" class="noDataNoticewl">目前没有可以查看的数据哟~</div>
              </div>
            </section>
            <section>
              <div class="titleBoxWhat">
                <!-- <img src="@/assets/wang/tdetails/age.png"
                alt="" />-->
                <div class="notice-box"></div>
                <span>实时直播达人年龄分布</span>
              </div>
              <div class="ageBox box-postion-item">
                <LiveAgeDistribution
                  :starXData="otherList.age_rate.x"
                  :starYData="otherList.age_rate.y"
                  v-if="finishFlag"
                />
                <div
                  v-loading="!finishFlag"
                  v-if="!finishFlag"
                  class="loading loading01"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div
                  v-if="finishFlag && otherList.age_rate == null"
                  class="noDataNoticewl"
                >目前没有可以查看的数据哟~</div>
                <div class="box-img">
                  <!-- <img src="@/assets/shi/workbenchbgc.png" alt="" /> -->
                </div>
              </div>
            </section>
            <section class="mt_10">
              <div class="titleBoxWhat">
                <!-- <img src="@/assets/wang/tdetails/fans.png"
                alt="" />-->
                <div class="notice-box"></div>
                <span>实时直播达人粉丝量分布</span>
              </div>
              <div class="fansBox box-postion-item">
                <LiveAgeDistribution
                  :starXData="otherList.fans_rate.x"
                  :starYData="otherList.fans_rate.y"
                  v-if="finishFlag"
                />
                <div
                  v-loading="!finishFlag"
                  v-if="!finishFlag"
                  class="loading"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div
                  v-if="finishFlag && otherList.fans_rate == null"
                  class="noDataNoticewl"
                >目前没有可以查看的数据哟~</div>
                <div class="box-img">
                  <!-- <img src="@/assets/shi/workbenchbgc.png" alt="" /> -->
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
      <!-- box4 -->
      <div class="box4">
        <div class="box4Right">
          <!-- 实时直播品牌排行 -->
          <div class="box4Right02">
            <div class="box3Left">
              <div class="liveSaleRankTop">
                <div class="titleBoxWhat">
                  <div class="notice-box"></div>
                  <span>实时直播品牌排行</span>
                </div>
              </div>
              <table class="myTable mytable01 mytable03 publicTable" v-if="finishList">
                <thead>
                  <tr>
                    <th>排名</th>
                    <th>品牌</th>
                    <th>销售额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in rankList.live_flow_brand_rank" :key="'d' + index">
                    <td class="brandSaleNum">{{ index + 1 }}</td>
                    <td>
                      <div
                        class="brandText"
                        @click="BrandDetails(item.brandId)"
                      >{{ item.brandName }}</div>
                    </td>
                    <td class="brandSaleNum Nnum">{{ format_num(item.amount) }}</td>
                  </tr>
                </tbody>
              </table>
              <div
                v-loading="!finishList"
                v-if="!finishList"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
            </div>
          </div>
          <!-- 实时直播商品排行 -->
          <div class="box4Right01">
            <div class="liveSaleRankTop">
              <div class="titleBoxWhat">
                <div class="notice-box"></div>
                <span>实时直播商品排行</span>
              </div>
            </div>
            <table class="myTable mytable02 goodsTable" v-if="finishList">
              <thead>
                <tr>
                  <th>排名</th>
                  <th style="text-align:left;padding-left:10px">商品信息</th>
                  <th>直播价</th>
                  <th>销量</th>
                  <th>销售额</th>
                  <th>带货达人</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in rankList.live_flow_pro_rank" :key="'c' + index">
                  <td class="brandSaleNum">{{ index + 1 }}</td>
                  <td>
                    <div class="goodsInfo" @click="toLiveDetailsGoods(item.pro_id)">
                      <img :src="item.pro_logo" @error="defaultImgFn(shop,$event)" />
                      <span>{{ item.title }}</span>
                    </div>
                  </td>
                  <td
                    class="brandSaleNum"
                    style="color:#222"
                    v-if="item.price == item.max_price || item.max_price == 0"
                  >￥{{ format_num(item.price) }}</td>
                  <td class="brandSaleNum" style="color:#222" v-if="item.price < item.max_price">
                    ￥{{ format_num(item.price) }}-{{
                    format_num(item.max_price)
                    }}
                  </td>

                  <td class="brandSaleNum">{{ format_num(item.volum) }}</td>
                  <td class="brandSaleNum">{{ format_num(item.sales) }}</td>
                  <td>
                    <div class="infoBox" @click="toTalent(item.authorid)">
                      <span>{{ item.nickname }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="!finishList"
              v-if="!finishList"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <!-- 实时直播品类排行 -->
          <div class="box4Right02">
            <div class="box3Left">
              <div class="liveSaleRankTop">
                <div class="titleBoxWhat">
                  <div class="notice-box"></div>
                  <span>实时直播品类排行</span>
                </div>
              </div>
              <table class="myTable mytable01 mytable03 publicTable" v-if="finishList">
                <thead>
                  <tr>
                    <th>排名</th>
                    <th>品类</th>
                    <th>销售额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in rankList.live_flow_category_rank" :key="'d' + index">
                    <td class="brandSaleNum">{{ index + 1 }}</td>
                    <td>
                      <div class="brandText brand">{{ item.category }}</div>
                    </td>
                    <td class="brandSaleNum Nnum">{{ format_num(item.sales) }}</td>
                  </tr>
                </tbody>
              </table>
              <div
                v-loading="!finishList"
                v-if="!finishList"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div
      v-loading="!(finishFlag && finishChart && finishList)"
      v-if="!(finishFlag && finishChart && finishList)"
      class="loading loadingNew finishLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
  </div>
</template>

<script>
import DetailsBar from '@/pages/wang/talent/tdetails/component/DetailsBar';
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
import ChinaMap from '@/pages/wang/talent/tdetails/component/ChinaMap';
import LineChart from '@/pages/wang/live/component/LineChart.vue';
import GenderDistribution from '@/pages/wang/live/component/GenderDistribution.vue';
import GenderSpread from '@/pages/wang/workbench/GenderSpread';
import LiveAgeDistribution from '@/pages/wang/live/component/LiveAgeDistribution.vue';
import shop from '@/assets/img/shop.png';
import superman from '@/assets/img/superman.png';
export default {
  name: 'trafficMarket',
  components: {
    LineChart,
    ChinaMap,
    BigPie,
    DetailsBar,
    GenderSpread,
    LiveAgeDistribution,
    GenderDistribution
  },
  data() {
    return {
      shop: shop,
      superman: superman,
      dataList: {},
      flow_rate: {}, //左上数据
      flow_chart: {}, //折线图
      room_count: '',
      pro_room_count: '',
      finishChart: false,
      xChart01: [],
      cancel: null,
      cancel01: null,
      rankList: [],
      barRank: [],
      otherList: {},
      // 粉丝性别分布
      genderData: [],
      finishFlag: false,
      // 地域分布
      provinceRate: [],
      //   倒计时
      mTime: '10',
      sTime: '00',
      finishList: false,
      show: false,
      loading: true
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getLiveFlowTrend();
    this.getRankList();
    this.getLiveFlow();
  },
  mounted() {
    this.djsTimeFun();
  },

  methods: {
    // 头像默认图片显示
    defaultImgFn(url, e) {
      if (url == superman) {
        e.target.src = superman;
      } else if (url == shop) {
        e.target.src = shop;
      }
    },
    toTalent(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    //   倒计时
    djsTimeFun() {
      let that = this;
      let djsTime = 600;
      setInterval(() => {
        djsTime--;
        let m = Math.floor(djsTime / 60);
        let s = Math.floor(djsTime % 60);
        if (m < 10) {
          that.mTime = '0' + m;
        } else {
          that.mTime = m;
        }
        if (s < 10) {
          that.sTime = '0' + s;
        } else {
          that.sTime = s;
        }
        if (djsTime == 0) {
          that.getLiveFlowTrend();
          that.getRankList();
          that.getLiveFlow();
          djsTime = 600;
        }
      }, 1000);
    },
    // 折线图和数据信息
    getLiveFlowTrend() {
      let that = this;
      that.$axios
        .get('/api/live/GetLiveFlowTrend', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel != null) {
              that.cancel();
            }
            that.cancel = c;
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.dataList = res.data.data;
            that.flow_rate = res.data.data.flow_rate;
            that.room_count = res.data.data.flow_rate.room_count;
            that.pro_room_count = res.data.data.flow_rate.pro_room_count;
            that.flow_chart = res.data.data.flow_chart;
            // x
            res.data.data.flow_chart.t.forEach(element => {
              that.xChart01.push(that.timestamp(element, 'h:m'));
              return that.xChart01;
            });
            that.finishChart = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取榜单数据
    getRankList() {
      let that = this;
      that.$axios
        .get('/api/live/GetLiveFlowTrendRank', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel01 != null) {
              that.cancel01();
            }
            that.cancel01 = c;
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.rankList = res.data.data;
            that.finishList = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取柱状图 地图
    getLiveFlow() {
      let that = this;
      that.$axios
        .get('/api/live/GetLiveFlowTrendAttribute', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel02 != null) {
              that.cancel02();
            }
            that.cancel02 = c;
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.otherList = res.data.data;
            that.genderData = res.data.data.gende_rate;
            that.provinceRate = res.data.data.city_rate;
            that.finishFlag = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳到达人详情
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    // 跳转品牌详情
    BrandDetails(id) {
      let routeUrl = this.$router.resolve({
        path: '/talent_main/brandRoot',
        query: { id }
      });
      window.open(routeUrl.href, '_blank');
    },
    // 跳到直播间商品部分详情
    toLiveDetailsGoods(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    // 跳到商品详情
    toGoodsDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>
<style lang="less" scoped>
#trafficMarket {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  .loadingNew {
    background-color: transparent !important;
  }
  .loading01 {
    margin-top: 40px;
  }
  .musicIcon {
    width: 13px !important;
    height: 16px !important;
  }
  .box1 {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    .box1Left {
      box-sizing: border-box;
      width: 330px;
      height: 309px;
      border-radius: 6px;
      background-image: url('../../../../assets/wang/live/liveBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0 26px 0 20px;
      position: relative;
      .refreshTime {
        position: absolute;
        top: 12px;
        right: 17px;
        font-size: 14px;
        color: #888;
      }
      .livingBox {
        width: 100%;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 29px;
        .text01 {
          padding-right: 4px;
        }
      }
      .nowTime01 {
        padding-top: 9px;
        font-family: DINAlternate-Bold;
        font-size: 14px;
        color: #fff;
      }
      .box1Num {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 34px;
        //
        .goodsnum {
          font-size: 16px;
          color: #fff;
        }
        .chang {
          display: flex;
          span {
            display: block;
            line-height: 1;
            padding-top: 34px;
            margin-left: 8px;
            color: #fff;
          }
        }
        .numData {
          font-size: 16px;
          color: #ffffff;
          span {
            display: block;
            font-size: 46px;
          }
        }
        .numData02 {
          font-size: 32px;
        }
        .rate01 {
          p:nth-of-type(1) {
            font-size: 12px;
            color: #ffffff;
            opacity: 0.7;
          }
          p:nth-of-type(2) {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 8px;
            img {
              display: inline-block;
              width: 8px;
              height: 12px;
              margin-bottom: 2px;
            }
            .pingRate {
              width: 12px;
              height: 8px;
            }
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #ffffff;
              padding-left: 4px;
              line-height: 100%;
            }
          }
        }
      }
      .box1Num01 {
        padding-top: 6px;
        align-items: flex-start;
      }
      .shopCar {
        width: 196px;
        height: 38px;
        line-height: 38px;
        background-color: rgba(5, 18, 42, 0.1);
        border-radius: 19px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 14px;
        img {
          width: 22px;
          height: 18px;
        }
        span:nth-of-type(1) {
          font-family: DINAlternate-Bold;
          font-size: 20px;
          height: 18px;
          line-height: 100%;
          color: #ffffff;
          padding-left: 8px;
          padding-right: 4px;
          padding-top: 1px;
        }
        span:nth-of-type(2) {
          font-size: 16px;
          color: #ffffff;
          padding-top: 2px;
        }
      }
      .viewNum {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 27px;
        span {
          font-size: 14px;
          color: #ffffff;
        }
        img {
          width: 14px;
          height: 14px;
          margin-left: 5px;
        }
      }
    }
    .box1Right {
      position: relative;
      box-sizing: border-box;
      flex: 1;
      background: #fff;
      margin-left: 10px;
      border-radius: 4px;
      padding-top: 20px;
      .box1Right-img {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 60px;
        left: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .box2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
    .rateBox {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      align-content: flex-end;
      margin-top: 18px;
      .rateSpan {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .span02 {
          display: block;
          font-size: 12px;
          color: #888888;
          padding-left: 13px;
        }
        img {
          display: block;
          width: 8px;
          height: 12px;
          margin-left: 4px;
        }
        .pingImg {
          width: 12px;
          height: 8px;
        }
        .span03 {
          font-size: 16px;
          padding-left: 6px;
        }
        .upColor {
          color: #ea1b0b;
        }
        .downColor {
          color: #02b389;
        }
        .pingColor {
          color: #888888;
        }
      }
      .span01 {
        display: block;
        font-size: 28px;
        height: 29px;
        line-height: 100%;
        color: #222222;
        font-family: DINAlternate-Bold;
      }
    }
    .box2Left {
      box-sizing: border-box;
      width: 330px;
      height: 110px;
      background-color: #fff;
      border-radius: 4px;
      padding: 20px 20px 0 20px;
    }
    .titleBoxWhat {
      /deep/img {
        width: 14px;
        height: 14px;
        margin-left: 5px;
      }
    }
    .box2Right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-left: 10px;
      .box2Item {
        box-sizing: border-box;
        padding: 20px 20px 0 20px;
        flex: 1;
        height: 110px;
        background-color: #ffffff;
        border-radius: 4px;
      }
      .box2Item:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
  .box3 {
    width: 100%;
    height: 712px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-radius: 4px;
    overflow: hidden;
    .box3Right {
      flex: 1;
      background-color: #ffffff;
      margin-left: 10px;
      height: 712px;
      display: flex;
      justify-content: flex-start;
      padding: 26px 20px 0 20px;
      overflow: auto;
      border-radius: 4px;
      .mapBox {
        width: 63%;
        .mymapBox {
          width: 100%;
          height: 566px;
          margin-top: 20px;
        }
      }
      .chartBox {
        width: 47%;
        .genderBox {
          overflow: hidden;
          width: 100%;
          height: 120px;
        }
        .ageBox {
          width: 100%;
          height: 238px;
        }
        .fansBox {
          width: 100%;
          height: 238px;
        }
        .box-postion-item {
          position: relative;
          .box-img {
            width: 63px;
            height: 22px;
            position: absolute;
            bottom: 52px;
            left: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .titleBoxWhat {
      /deep/img {
        width: 14px;
        height: 14px;
        margin-left: 5px;
      }
    }
  }
  .box4 {
    margin-top: 10px;
    .box4Right {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      .box4Right01 {
        .infoBox {
          padding: 0;
          span {
            width: 100%;
            text-align: center;
            color: #222;
          }
          span:hover {
            color: #ff924b;
          }
        }
        flex: 1;
        background-color: #ffffff;
        border-radius: 4px;
        padding: 0px 20px 0 20px;
        overflow: auto;
        margin: 0 10px;
        .goodsInfo {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 10px;
          cursor: pointer;
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
          }
          span {
            flex: 1;
            text-align: left;
            font-size: 14px;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            padding-left: 9px;
          }
          span:hover {
            color: #ff924b;
          }
        }
        .mytable02 {
          margin-top: 25px;
          thead {
            th {
              font-weight: 500;
              white-space: nowrap;
            }
          }
          tbody {
            tr {
              td {
                padding: 0 2px;
              }
              height: 78px;
              border-bottom: 1px solid #efefef;
              td:nth-of-type(2) {
                width: 34%;
              }
              td:nth-of-type(1),
              td:nth-of-type(3),
              td:nth-of-type(4),
              td:nth-of-type(5) {
                font-family: DINAlternate-Bold;
              }
              td:nth-of-type(6) {
                width: 18%;
              }
              td:nth-of-type(5) {
                font-size: 16px;
                color: #222;
              }
            }
            tr:last-child {
              border: none;
            }
          }
        }
      }
      .box4Right02 {
        width: 330px;
        background-color: #ffffff;
        border-radius: 4px;
      }
    }
  }
  //   table
  .myTable {
    width: 100%;
    thead {
      th {
        font-size: 14px;
        color: #888888;
        text-align: center;
        padding-bottom: 9px;
        font-weight: 500;
      }
    }
    tbody {
      td {
        text-align: center;
        font-size: 16px;
        color: #222;
      }
    }
  }
  //   table的
  .box3Left {
    width: 330px;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: border-box;
    .mytable01 {
      thead {
        th {
          padding-top: 25px;
          font-weight: 500;
        }
        th:nth-of-type(2) {
          text-align: left;
          padding-left: 34px;
        }
      }
      tbody {
        tr {
          height: 61px;
          border-bottom: 1px solid #efefef;
          td:nth-of-type(1) {
            width: 12%;
          }
          td:nth-of-type(2) {
            width: 60%;
          }
          td:nth-of-type(1),
          td:nth-of-type(3) {
            font-family: DINAlternate-Bold;
          }
          .brand {
            cursor: default !important;
          }
          .brand:hover {
            color: #222 !important ;
          }
          .brandText {
            font-size: 14px;
            color: #222222;
            text-align: left;
            padding-left: 34px;
            cursor: pointer;
          }
          .brandText:hover {
            color: #ff924b;
          }
        }
        tr:last-child {
          border: none;
        }
      }
    }
  }
  .brandSaleNum {
    white-space: nowrap;

    font-size: 15px !important;
  }
  .Nnum {
    color: #222 !important;
  }
  // 商品排行table鼠标移入
  .goodsTable {
    tbody {
      tr:hover {
        cursor: pointer;
        background-color: #fff7f1;
      }
    }
  }
  .publicTable {
    tbody {
      tr:hover {
        cursor: pointer;
        background-color: #fff7f1;
      }
    }
  }
  .mytable03 {
    tbody {
      tr {
        height: 78px !important;
      }
    }
  }
  .infoBox {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 5px;
    margin-right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    img:nth-of-type(1) {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid #e5e5e5;
    }
    img:nth-of-type(2) {
      width: 14px;
      height: 14px;
      margin-left: 5px;
    }
    span {
      // flex: 1;
      width: 68px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      padding-left: 7px;
      font-size: 14px;
    }
    span:hover {
      color: #ff924b;
    }
  }
  .liveSaleRankTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
  }
  .moreIcon01 {
    width: 6px;
    height: 10px;
    cursor: pointer;
  }
  .notice-box {
    width: 4px;
    height: 16px;
    border-radius: 100px;
    background-color: #fd7f2c;
  }
}
.finishLoading{
  position:relative;
  // top:50% !important;
  height:96vh;
  .el-loading-mask{
    background-color:transparent !important;
  }

}
</style>
